<template>
	<view class="cc-time-picker" :style="{
		'--light-color': $theme.lightColor
	}">
		<picker
			:start="start"
			:end="end"
			@change="bindPickerChange" 
			:value="value" 
			mode="time"
			:disabled="disabled"
		>
			<view class="mm-picker__content">
				<view :class="['mm-picker__text', disabled ? 'mm-picker__placeholder' : '']" v-if="value">{{value}}</view>
				<view class="mm-picker__placeholder" v-else>{{placeholder}}</view>
				<!-- #ifdef APP-PLUS -->
				<w-icon top="-4" name="arrow-down" size="28" wrap-width="50" color="lightColor" align="flex-end"></w-icon>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<w-icon top="8" name="arrow-down" size="28" wrap-width="50" color="lightColor" align="flex-end"></w-icon>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<w-icon top="0" name="arrow-down" size="28" wrap-width="50" color="lightColor" align="flex-end"></w-icon>
				<!-- #endif -->
			</view>
		</picker>
	</view>
</template>

<script>
	/**
	 * 时间picker双向绑定封装
	 */
	import Emitter from '../../libs/util/emitter.js';
	export default {
		name: 'w-time-picker',
		mixins: [Emitter],
		props: {
			// v-model
			value: {
				type: [String, Number],
				default: 0
			},
			placeholder: {
				type: String,
				default: '请选择时间'
			},
			start: {
				type: String,
				default: ''
			},
			end: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
			}
		},
		methods: {
			bindPickerChange(e) {
				this.$emit('input', e.detail.value);
				this.$emit('change', e.detail.value);
				this.$nextTick(() => {
					this.dispatch('w-form-item', 'on-form-change', e.detail.value);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cc-time-picker {
		width: 100%;
		.mm-picker__content {
			text-align: right;
			display: flex;
			.mm-picker__placeholder {
				color: var(--light-color);
				flex: 1;
			}
			.mm-picker__text {
				flex: 1;
			}
		}
	}
</style>
